<template>
  <view class="content">
    <Navbar :title="title" id="Navbar" />
    <scroll-view scroll-y class="mainSroll">
      <view
        class="main"
        :style="{ height: windowHeight - navbarHeight + 'px' }"
      >
        <scroll-view scroll-y class="mainLeft">
          <view
            @click="selectIndex = index"
            class="btn"
            v-for="(item, index) in list"
            :key="item.cat_id"
          >
            <text :class="{ active: selectIndex === index }">
              {{ item.cat_name }}
            </text>
          </view>
        </scroll-view>
        <scroll-view scroll-y class="mainRight">
          <view
            v-for="item2 in list2"
            :key="item2.cat_name"
            v-show="item2.children"
          >
            <view class="second">
              <text v-if="item2.children">/ {{ item2.cat_name }} /</text>
            </view>
            <view class="imgBox">
              <view
                class="everyBox"
                v-for="(item3, index) in item2.children"
                :key="item3.cat_name"
                @click="goNextPage(item3.cat_id)"
              >
                <img
                  :src="item3.cat_icon"
                  :class="{ n: (index + 2) % 3 === 1 }"
                />
                <view class="everyName">
                  <text>{{ item3.cat_name }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getCategoriesAPI } from "@/api/category";
export default {
  data() {
    return {
      title: "商品分类",
      list: [],
      selectIndex: 0,
      windowHeight: 0,
      navbarHeight: 0,
    };
  },
  onShow() {
    this.getCategories();
    this.getSystemInfo();
    this.getComponetSize();
  },
  computed: {
    list2() {
      if (!this.list.length) return [];
      return this.list[this.selectIndex].children;
    },
  },
  methods: {
    goNextPage(id) {
      // console.log(id);
      uni.navigateTo({
        url: `/pages/goodsList/index?id=${id}`,
      });
    },
    // 获取 Navbar 组件布局信息
    async getComponetSize() {
      const size = await uni.createSelectorQuery();
      console.log(size);
      size
        .select("#Navbar")
        .boundingClientRect((data) => {
          console.log("得到布局位置信息", data);
          this.navbarHeight = data.height;
        })
        .exec();
    },
    async getSystemInfo() {
      const res = await uni.getSystemInfo();
      // console.log(res);
      this.windowHeight = res.windowHeight;
    },
    async getCategories() {
      const { message } = await getCategoriesAPI();
      console.log(message);
      this.list = message;
    },
  },
};
</script>

<style lang="scss">
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .mainSroll {
    overflow: hidden;
    .main {
      display: flex;
      .mainLeft {
        width: 182rpx;
        overflow: hidden;
        background-color: #f3f3f3;
        .btn {
          display: flex;
          align-items: center;
          width: 182rpx;
          height: 76rpx;
          font-size: 28rpx;
        }
        text {
          width: 180rpx;
          height: 30rpx;
          text-align: center;
        }
        .active {
          border-left: 2px solid #eb4450;
        }
      }
      .mainRight {
        width: 568rpx;
        overflow: hidden;
        .second {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 568rpx;
          height: 80rpx;
          // background-color: pink;
        }
        .imgBox {
          display: flex;
          justify-content: space-evenly;
          flex-wrap: wrap;
          padding: 0 40rpx 0 48rpx;
          img {
            width: 120rpx;
            height: 120rpx;
            margin-right: 56rpx;
          }
          .n {
            margin-right: 0rpx;
          }
          .everyName {
            width: 120rpx;
            text-align: center;
            font-size: 12px;
          }
        }
        .imgBox:last-child {
          justify-content: flex-start;
        }
      }
    }
  }
}
</style>
